<template>
  <div class="app-container">
    <!-- 工具条 -->
    <div style="float: left;margin-bottom: 5px">
      <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
      <el-button size="mini" @click="toggleSelection()">取消选择</el-button>
    </div>
    <div style="float: left;margin-bottom: 5px;margin-left: 5px">
      <el-button type="success" size="mini" @click="dialog()">添加</el-button>
    </div>
    <el-table
            ref="multipleTable"
            :data="list"
            style="width: 100%"
            row-key="menuId"
            border
            :cell-style="TableCellStyle"
            lazy
            :load="getChildrens"
            @selection-change="handleSelectionChange"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column type="selection" width="40" />
      <el-table-column label="编号" width="150">
        <template slot-scope="{ row }">
          {{ row.menuId }}
        </template>
      </el-table-column>
      <el-table-column label="名称" width="160" align="left">
        <template slot-scope="scope">
          <i :class="scope.row.icon"></i>&nbsp;
          <span>{{ scope.row.menuName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="系统类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.menuType==='M'?'目录':scope.row.menuType==='C'?'菜单':'按钮' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编码权限" width="160">
        <template slot-scope="scope">
          {{ scope.row.perms }}
        </template>
      </el-table-column>
      <el-table-column label="显示顺序" width="100">
        <template slot-scope="scope">
          {{ scope.row.orderNum }}
        </template>
      </el-table-column>
      <el-table-column label="路由路径" width="160" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.url }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="组件路径" width="200" align="left">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ scope.row.component }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="路由参数" width="60" align="left">-->
<!--        <template slot-scope="scope">-->
<!--          <span>{{ scope.row.query }}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="是否可用" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.visible==='0'?'可用':'不可用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="320" align="center">
        <template slot-scope="scope">
          <el-button
                  @click="removeDataById(scope.row.menuId)"
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
          >删除</el-button>
          <el-button
                  @click="isUser(scope.row.menuId,scope.row.visible==='1'?'0':'1')"
                  size="mini"
                  :icon="scope.row.visible==='0'?'el-icon-turn-off':'el-icon-open'"
                  :type="scope.row.visible==='0'?'warning':'success'"
          >{{scope.row.visible=== '0'?'禁用':'启用'}}</el-button>
          <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  @click="dialog(scope.row.menuId)"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
            :title="flag?'修改菜单管理':'添加菜单管理'"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label='菜单名称：' prop='menuName'>
          <el-input v-model='form.menuName' placeholder='请输入菜单名称'/>
        </el-form-item>
        <el-form-item
                label='菜单图标：'
                prop='icon'>
          <el-popover
                  placement="bottom"
                  width="450"
                  trigger="click"
                  @show="popoverShow">
                        <span slot="reference">
                          <el-input suffix-icon='data-icon' v-model='form.icon' placeholder='请输入'>
                                <template slot="append"><i :class="form.icon"/></template>
                          </el-input>
                        </span>
            <div class="iconList">
              <el-tabs v-model="activeName">
                <el-tab-pane label="Element-UI Icons">
                                    <span v-for="item of elementIcons" :key="item">
                                        <el-tooltip placement="top">
                                            <div slot="content">
                                                {{ generateElementIconCode(item) }}
                                            </div>
                                            <div class="icon-item">
                                                <i :class="'el-icon-' + item"  @click="setIcon(item)"/>
                                            </div>
                                        </el-tooltip>
                                    </span>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-popover>
        </el-form-item>
        <el-form-item label='父类：'
                      prop='parentId'>
          <el-select v-model="form.parentId" style="width: 100%" placeholder="请选择是否可用">
            <el-option label="租车后台管理系统" :value="0"></el-option>
            <el-option v-for="i in listAll" :label="i.menuName" :value="i.menuId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='菜单类型：'
                      prop='menuType'>
          <el-select v-model="form.menuType" style="width: 100%" placeholder="请选择是否可用">
            <el-option label="目录" value="M">目录</el-option>
            <el-option label="菜单" value="C">菜单</el-option>
            <el-option label="按钮" value="F">按钮</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示菜单顺序" prop="orderNum">
          <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label='编码权限：'
                      prop='perms'>
          <el-input v-model='form.perms' placeholder='请输入权限标识'/>
        </el-form-item>
        <el-form-item label='菜单路径：'
                      prop='url'>
          <el-input suffix-icon='data-icon' v-model='form.url' placeholder='请输入菜单路径'/>
        </el-form-item>
<!--        <el-form-item label='组件路径：'-->
<!--                      prop='component'>-->
<!--          <el-input suffix-icon='data-icon' v-model='form.component' placeholder='请输入组件路径'/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label='组件参数：'-->
<!--                      prop='query'>-->
<!--          <el-input suffix-icon='data-icon' v-model='form.query' placeholder='请输入组件参数'/>-->
<!--        </el-form-item>-->
        <el-form-item label='是否可用：'
                      prop='visible'>
          <el-select v-model="form.visible" style="width: 100%" placeholder="请选择是否可用">
            <el-option label="可用" value="0">可用</el-option>
            <el-option label="不可用" value="1" >不可用</el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" v-if="flag" @click="saveUpdate">确 定</el-button>
                <el-button type="success" v-if="!flag" @click="save">添 加</el-button>
              </span>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: "ToMenuManager",
    data() {
      return {
        list: [],
        listAll:[],
        dialogVisible:false,
        elementIcons:['platform-eleme', 'eleme', 'delete-solid', 'delete', 's-tools', 'setting', 'user-solid', 'user', 'phone', 'phone-outline', 'more', 'more-outline', 'star-on', 'star-off', 's-goods', 'goods', 'warning', 'warning-outline', 'question', 'info', 'remove', 'circle-plus', 'success', 'error', 'zoom-in', 'zoom-out', 'remove-outline', 'circle-plus-outline', 'circle-check', 'circle-close', 's-help', 'help', 'minus', 'plus', 'check', 'close', 'picture', 'picture-outline', 'picture-outline-round', 'upload', 'upload2', 'download', 'camera-solid', 'camera', 'video-camera-solid', 'video-camera', 'message-solid', 'bell', 's-cooperation', 's-order', 's-platform', 's-fold', 's-unfold', 's-operation', 's-promotion', 's-home', 's-release', 's-ticket', 's-management', 's-open', 's-shop', 's-marketing', 's-flag', 's-comment', 's-finance', 's-claim', 's-custom', 's-opportunity', 's-data', 's-check', 's-grid', 'menu', 'share', 'd-caret', 'caret-left', 'caret-right', 'caret-bottom', 'caret-top', 'bottom-left', 'bottom-right', 'back', 'right', 'bottom', 'top', 'top-left', 'top-right', 'arrow-left', 'arrow-right', 'arrow-down', 'arrow-up', 'd-arrow-left', 'd-arrow-right', 'video-pause', 'video-play', 'refresh', 'refresh-right', 'refresh-left', 'finished', 'sort', 'sort-up', 'sort-down', 'rank', 'loading', 'view', 'c-scale-to-original', 'date', 'edit', 'edit-outline', 'folder', 'folder-opened', 'folder-add', 'folder-remove', 'folder-delete', 'folder-checked', 'tickets', 'document-remove', 'document-delete', 'document-copy', 'document-checked', 'document', 'document-add', 'printer', 'paperclip', 'takeaway-box', 'search', 'monitor', 'attract', 'mobile', 'scissors', 'umbrella', 'headset', 'brush', 'mouse', 'coordinate', 'magic-stick', 'reading', 'data-line', 'data-board', 'pie-chart', 'data-analysis', 'collection-tag', 'film', 'suitcase', 'suitcase-1', 'receiving', 'collection', 'files', 'notebook-1', 'notebook-2', 'toilet-paper', 'office-building', 'school', 'table-lamp', 'house', 'no-smoking', 'smoking', 'shopping-cart-full', 'shopping-cart-1', 'shopping-cart-2', 'shopping-bag-1', 'shopping-bag-2', 'sold-out', 'sell', 'present', 'box', 'bank-card', 'money', 'coin', 'wallet', 'discount', 'price-tag', 'news', 'guide', 'male', 'female', 'thumb', 'cpu', 'link', 'connection', 'open', 'turn-off', 'set-up', 'chat-round', 'chat-line-round', 'chat-square', 'chat-dot-round', 'chat-dot-square', 'chat-line-square', 'message', 'postcard', 'position', 'turn-off-microphone', 'microphone', 'close-notification', 'bangzhu', 'time', 'odometer', 'crop', 'aim', 'switch-button', 'full-screen', 'copy-document', 'mic', 'stopwatch', 'medal-1', 'medal', 'trophy', 'trophy-1', 'first-aid-kit', 'discover', 'place', 'location', 'location-outline', 'location-information', 'add-location', 'delete-location', 'map-location', 'alarm-clock', 'timer', 'watch-1', 'watch', 'lock', 'unlock', 'key', 'service', 'mobile-phone', 'bicycle', 'truck', 'ship', 'basketball', 'football', 'soccer', 'baseball', 'wind-power', 'light-rain', 'lightning', 'heavy-rain', 'sunrise', 'sunrise-1', 'sunset', 'sunny', 'cloudy', 'partly-cloudy', 'cloudy-and-sunny', 'moon', 'moon-night', 'dish', 'dish-1', 'food', 'chicken', 'fork-spoon', 'knife-fork', 'burger', 'tableware', 'sugar', 'dessert', 'ice-cream', 'hot-water', 'water-cup', 'coffee-cup', 'cold-drink', 'goblet', 'goblet-full', 'goblet-square', 'goblet-square-full', 'refrigerator', 'grape', 'watermelon', 'cherry', 'apple', 'pear', 'orange', 'coffee', 'ice-tea', 'ice-drink', 'milk-tea', 'potato-strips', 'lollipop', 'ice-cream-square', 'ice-cream-round'],
        form:{parentId:0,menuName:'',code:'',url:'',icon:'',visible:0,menuType:'',perms:''},

        activeName:'',
        multipleSelection: [], // 批量选择中选择的记录列表
        flag:true,
      }
    },
    created() {
      this.initTable(0);
    },
    methods: {
      initTable(id) {
        this.$http.get(`/system/api/menu/pid/${id}`).then((response) => {
          this.list = response.data.data;
        })
        this.$http.get(`/system/api/menu/all`).then((response) => {
          this.listAll = response.data.data;
        })
      },
      // 查询子类
      getChildrens(tree, treeNode, resolve) {
        this.$http.get(`/system/api/menu/pid/${tree.menuId}`).then((response) => {
          resolve(response.data.data)
        })
      },
      // 改变单元格背景颜色
      TableCellStyle({row, column, rowIndex, columnIndex}) {
        // if ( columnIndex === 3 && row.menuType === 'M') {
        //     return 'background-color: #FFA500'
        //     //第二种
        //     return 'cell-grey'
        // }else if(columnIndex === 3 && row.menuType === 'C'){
        //     return 'background-color: #00CED1'
        // }else if(columnIndex === 3 && row.menuType === 'F' ){
        //     return 'background-color: #FF6347'
        // }
      },
      saveUpdate(){
        this.dialogVisible = false;
        this.$http.put('/system/api/menu/update',this.form).then(resp =>{
          if(resp.data.code ===200){
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
            this.dialogVisible = false;
            this.initTable(this.form.menuId);
            this.initTable(0);
          }
        })
      },
      save(){
        this.$http.post('/system/api/menu/insert',this.form).then(resp =>{
          if(resp.data.code ===200){
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            this.dialogVisible = false;
            this.initTable(0);
          }
        })
      },
      isUser(menuId,visible){
        this.$http.put(`/system/api/menu/${menuId}/${visible}`).then(resp =>{
          if(resp.data.code ===200){
            this.$message({
              type: 'success',
              message: '修改使用成功!'
            })
            this.dialogVisible = false;
            this.initTable(menuId);
            this.initTable(0);
          }
        })
      },
      dialog(id){
        this.dialogVisible = true;
        if (id !== undefined){
          this.flag=true
          this.$http.get(`/system/api/menu/${id}`).then((response) => {
            this.form = response.data.data;
          })
        }else{
          this.resetForm('form')
          this.flag=false
        }
      },

      // 批量除该客户信息
      removeRows() {
        this.$confirm('此操作将永久删除客户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var idList = []
          // 遍历数组得到每个id值，设置到idList里面
          for (var i = 0; i < this.multipleSelection.length; i++) {
            var obj = this.multipleSelection[i]
            var id = obj.menuId
            idList.push(id)
          }
          // 确定执行then方法
          // 调用接口
         //批量删除
          this.$http.delete("/system/api/menu/delete",{data: idList}).then((response) => {
            // 提示信息
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 刷新页面
            this.initTable(0)
          })
        })
      },

      // 删除该信息
      removeDataById(menuId) {
        this.$confirm('此操作将永久删除客户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定执行then方法
          // 调用接口
          var idList = [menuId]
          this.$http.delete("/system/api/menu/delete",{data: idList}).then((response) => {
            // 提示信息
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 刷新页面
            this.initTable(0)
          })
        })
      },

      // 获取选择复选框的id值
      handleSelectionChange(selection) {
        this.multipleSelection = selection
      },
      // 取消选择
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$nextTick(() => {
            this.$refs.multipleTable.clearSelection()
          })
        }
      },
      // 重置
      resetForm(formName) {
        this.$nextTick(()=>{
          this.$refs[formName].resetFields();
        })
      },

      handleClose(done) {
        this.$confirm('确认关闭？')
                .then(_ => {
                  done();
                })
                .catch(_ => {});
      },
      // 方法
      /**
       * @description 图标弹窗框显示时触发
       * @author 饺子
       */
      popoverShow() {
        this.$nextTick(()=>{
          this.activeName = '0'
        })
      },
      /**
       * @description 给icon绑定的点击事件
       * @author 饺子
       * @param { String } icon 图标
       */
      setIcon(icon) {
        this.$set(this.form, 'icon', `el-icon-${icon}`)
      },
      generateElementIconCode(symbol) {
        return `<i class="el-icon-${symbol}" />`
      },
    }
  }
</script>

<style scoped>
  body {
    margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
  }
  .iconList {
    width: 100%;
    height: 320px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;/*一定要换行*/
  }
  .icon-item{
    display: inline-block;
    width: 60px;
    height: 45px;
    color: #000000;
    font-size: 20px;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    margin: 5px;
  }
  .icon-item:hover {
    color: blue;
    border-color: blue;
  }
  .iconList ::v-deep .el-tabs__content {
    height: 270px;
    overflow-y: scroll; /*y轴显示滚动条*/
    overflow-x: hidden; /*x轴溢出隐藏*/
  }
  .cell-grey{
    background: #444;
  }
</style>
